<template>
	<div class="my-divider"
			:style="borderd?'font-weight:bold;border-left:4px solid #4CA18C;font-size:22px;':'border:none;font-size:25px;'">
		<div class="my-divider-title">{{title}}</div>
		<div class="my-divider-hint">{{hint}}
			<i class="material-icons"
				style="float:right;line-height:30px;">keyboard_arrow_right</i>
		</div>
	</div>
</template>

<script>
export default {
	name: "MyCDivider",
	props: {
		title: String,
		hint: String,
		borderd: {
			type: Boolean,
			default: true
		},
	}
}
</script>

<style scoped>
	.my-divider {
		height: 30px;
		margin: 15px 10px 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.my-divider-title {
		flex: 1;
		margin-left: 15px !important;
		font-size: 20px;
		line-height: 30px;
	}
	.my-divider-hint {
		text-align: right;
		font-size: 16px;
		color: #AFAFAF;
		line-height: 30px;
	}
</style>